<template>

  <div class="row q-col-gutter-x-md q-px-sm">
    <div class="col-6">
      <q-input v-model="text_a" filled type="textarea" rows="15" label="文本A" />
    </div>
    <div class="col-6">
      <q-input v-model="text_b" filled type="textarea" rows="15" label="文本B" />
    </div>
  </div>


  <div class="q-pa-md q-gutter-sm" style="text-align: center;">
    <q-checkbox
          left-label
          v-model="ignoreCase"
          checked-icon="task_alt"
          unchecked-icon="task_alt"
        >
        <q-tooltip class="bg-accent" anchor="top middle" self="center middle">是否忽略大小写</q-tooltip>
      </q-checkbox>
    <q-btn class="color-btn" size="small" label="分析比较" @click="diff_data" />
    <q-btn class="color-second-btn" size="small" label="清空" @click="clear" />
  </div>
  <q-separator />
  <div class="row q-col-gutter-x-md q-px-sm">
    <div class="col-3 q-pa-md text-center">
      <q-input v-model="text_bin" filled type="textarea" rows="10" label="并集"></q-input>
      <q-btn color="primary" rounded size="xs" label="复制" @click="copy_data('text_bin')"><q-badge class="q-mx-sm"
          outline color="orange" :label="text_bin_cnt" /></q-btn>
    </div>
    <div class="col-3 q-pa-md text-center">
      <q-input v-model="text_jiao" filled type="textarea" rows="10" label="交集" />
      <q-btn color="primary" rounded size="xs" label="复制" @click="copy_data('text_jiao')"><q-badge class="q-mx-sm"
          outline color="orange" :label="text_jiao_cnt" /></q-btn>
    </div>
    <div class="col-3  q-pa-md text-center">
      <q-input v-model="text_cha_ab" filled type="textarea" rows="10" label="差集(A-B)" />
      <q-btn color="primary" rounded size="xs" label="复制" @click="copy_data('text_cha_ab')"><q-badge class="q-mx-sm"
          outline color="orange" :label="text_cha_ab_cnt" /></q-btn>
    </div>
    <div class="col-3 q-pa-md text-center">
      <q-input v-model="text_cha_ba" filled type="textarea" rows="10" label="差集(B-A)" />
      <q-btn color="primary" rounded size="xs" label="复制" @click="copy_data('text_cha_ba')"><q-badge class="q-mx-sm"
          outline color="orange" :label="text_cha_ba_cnt" /></q-btn>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useQuasar } from 'quasar'

import { copyTextToClipboard } from '../utils/utils'

const $q = useQuasar()

const ignoreCase = ref(false)

const text_a = ref('')
const text_b = ref('')

const text_bin = ref('')
const text_bin_cnt = computed(() => {
  if (text_bin.value) {
    return text_bin.value.split('\n').length
  } else {
    return 0
  }
})

const text_jiao = ref('')
const text_jiao_cnt = computed(() => {
  if (text_jiao.value) {
    return text_jiao.value.split('\n').length
  } else {
    return 0
  }
})

const text_cha_ab = ref('')
const text_cha_ab_cnt = computed(() => {
  if (text_cha_ab.value) {
    return text_cha_ab.value.split('\n').length
  } else {
    return 0
  }
})

const text_cha_ba = ref('')
const text_cha_ba_cnt = computed(() => {
  if (text_cha_ba.value) {
    return text_cha_ba.value.split('\n').length
  } else {
    return 0
  }
})


async function copy_TextToClipboard(text) {
  copyTextToClipboard(text)
    $q.notify({
      position: 'top',
      type: 'positive',
      message: '已复制到剪贴板'
    })
};

const clear = () => {
  text_a.value = ''
  text_b.value = ''
  text_jiao.value = ''
  text_bin.value = ''
  text_cha_ab.value = ''
  text_cha_ba.value = ''
}

// 并集
function union(array1, array2) {
  if (ignoreCase.value) {
    // 将两个数组中的所有元素转换为小写，并合并成一个新的数组
    const combinedLowerCase = [...array1.map(item => item.toString().toLowerCase()), ...array2.map(item => item.toString().toLowerCase())];

    // 使用 Set 去除重复项
    const uniqueLowerCase = new Set(combinedLowerCase);

    // 从原数组中提取对应的值，保持原始数据的大小写
    const result = [];
    array1.forEach(item => {
      if (uniqueLowerCase.has(item.toString().toLowerCase())) {
        result.push(item);
        uniqueLowerCase.delete(item.toString().toLowerCase()); // 移除已添加的元素，避免重复
      }
    });
    array2.forEach(item => {
      if (uniqueLowerCase.has(item.toString().toLowerCase())) {
        result.push(item);
      }
    });

    return result;
  } else {
    return [...new Set([...array1, ...array2])];
  }

}

// 交集
function intersection(array1, array2) {
  if (ignoreCase.value) {
    const lowerCaseA = array1.map(item => item.toString().toLowerCase());
    return array2.filter(item => lowerCaseA.includes(item.toString().toLowerCase()));

  } else {
    const setA = new Set(array1);
    return array2.filter(item => setA.has(item));
  }


}
// 差集
function difference(array1, array2) {
  if (ignoreCase.value) {
    const lowerCaseB = array2.map(item => item.toString().toLowerCase());
    return array1.filter(item => !lowerCaseB.includes(item.toString().toLowerCase()));
  } else {
    const setB = new Set(array2);
    return array1.filter(item => !setB.has(item));
  }

}

const diff_data = () => {
  if (!text_a.value && !text_b.value) {
    $q.notify({
      position: 'top',
      type: 'warning',
      message: '请填写文本A和文本B,一条数据为一行'
    })
  } else {
    let arry_a = text_a.value.replace(/\n/g, "||").split('||')
    let arry_b = text_b.value.replace(/\n/g, "||").split('||')
    text_bin.value = union(arry_a, arry_b).join('\n')
    text_jiao.value = intersection(arry_a, arry_b).join('\n')
    text_cha_ab.value = difference(arry_a, arry_b).join('\n')
    text_cha_ba.value = difference(arry_b, arry_a).join('\n')
  }
}

const copy_data = (data_type) => {
  if (data_type == 'text_bin') {
    copy_TextToClipboard(text_bin.value)
  } else if (data_type == 'text_jiao') {
    copy_TextToClipboard(text_jiao.value)
  } else if (data_type == 'text_cha_ab') {
    copy_TextToClipboard(text_cha_ab.value)
  } else if (data_type == 'text_cha_ba') {
    copy_TextToClipboard(text_cha_ba.value)
  }
}

</script>


<style></style>